<%--
  Created by IntelliJ IDEA.
  User: 小柒的Java
  Date: 2021/7/20
  Time: 10:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax局部刷新</title>
    <script src="webjars/jquery/3.5.1/jquery.min.js"> </script>

    <script>
        var xmlHttpRequest = new XMLHttpRequest();
        // function get_ajax(){
        //     // 1.发送get请求
        //     // 参数：String method，String uri，【async】
        //     // get请求可以在请求路径后边添加参数信息
        //     xmlHttpRequest.open('get','doAjax_1?a=xiaoqi&b=baibai');
        //     xmlHttpRequest.send();
        // }
        $(function () {
            $("#btn1").click(function () {
                $.get("doAjax_1",{a:"xiaoqi",b:"xiaoba"},function (d) {
                    console.log(d)
                })
            })

            $("#btn2").click(function () {
                $.post("doAjax_1",{a:"xiaoqi",b:"xiaoba"},function (d) {
                    console.log(d)
                })
            })

            $("#btn3").click(function () {
                $.getScript("doAjax_2",function (d) {
                    console.log("这是javaScript的参数信息")
                })
            })
            $("#btn4").click(function () {
                $.getJSON("doAjax_3",{a:"xiaoqi",b:"xiaoba"},function (d) {
                    console.log(d)
                })
            })

        })

        function post_ajax() {
            // 1.发送post请求
            // 参数：String method，String uri，【async】
            // post请求的请求参数必须在send方法里边传入值
            // post请求如果要传入请求参数信息，必须设置请求头信息中的content-type属性
            xmlHttpRequest.open("post",'doAjax_1');
            xmlHttpRequest.setRequestHeader("content-type","application/x-www-form-urlencoded");
            xmlHttpRequest.send("a=xiaoqi&b=baibai");
        }

        function countBMI() {
            // 1.获取xmlHttpRequest（)对象
            let xmlHttpRequest1 = new XMLHttpRequest();
            // 获取参数信息
            let username = document.getElementById("username").value;
            let age = document.getElementById("age").value;
            let weight = document.getElementById("weight").value;
            var a ="age="+age+"&weight="+weight;
            alert(a);
            // 3.设置参数信息
            xmlHttpRequest1.open('get','doBMI?'+a);
            // 4.绑定事件
            xmlHttpRequest1.onreadystatechange = function (){
                // 5.判断响应回来的状态码
                alert(1);
                if (xmlHttpRequest1.readyState == 4){
                    alert(2);
                   var data = xmlHttpRequest1.responseText;
                    alert(data);
                   document.getElementById("BMI").innerHTML=data;
                }
            }
            // 6.发送请求
            xmlHttpRequest1.send();

        }
        function reciveTime() {

            xmlHttpRequest.open("get","getNowTime");
            xmlHttpRequest.onreadystatechange = function () {
                document.getElementById("timeAmg").style.display = "none";
                if (xmlHttpRequest.readyState==4){
                  var data = xmlHttpRequest.responseText;
                  var timeSpan = document.getElementById("nowTime");
                  timeSpan.innerHTML = data;
                }
            }
            xmlHttpRequest.send();
            document.getElementById("timeAmg").style.display="block";
        }

    </script>
</head>
<body>
    <button id="btn1">get请求</button><br>
    <button id="btn2">post请求</button>
    <button id="btn3">js请求</button>
    <button id="btn4">json请求</button>
<hr><hr>
    <center>
        姓名<input type="text" id="username" name="username"><br>
        年龄<input type="text" id="age" name="age"><br>
        体重<input type="text" id="weight" name="weight"><br>
        <input type="button" id="countBMI" onclick="countBMI()" value="计算" name="countBMI">
        结果：<span id="BMI" name="BMI"></span>
        
        <button onclick="reciveTime()">
            显示当前时间:
        </button>
        <div><img src="logo2.png" id="timeAmg" style="display: none "></div>
        <span id="nowTime"></span>
    </center>
</body>
</html>
